import React from 'react';
import { Menu } from 'antd';
import type { MenuProps } from 'antd';
import { static_routes } from '../../router/routes';
import { useLocation, useNavigate } from 'react-router-dom'
import { ll } from '../../utils/storage';
import { RouterRawState } from '../../types';
import { ItemType, MenuItemType } from 'antd/es/menu/hooks/useItems';
type MenuItem = Required<MenuProps>['items'][number];

// 渲染菜单
const renderMenu = (routes: RouterRawState[]): ItemType<MenuItemType>[] => routes.filter(v => {
  // 过滤筛选 通过 meta.hidden
  // 是否隐藏
  if (v.meta?.hidden) return false
  return true
}).filter(v => {
  // 过滤筛选 通过 meta.roles
  // 筛选 用户权限
  // 1. 用户是超级管理员， 拥有所有全选
  // 2. meta.roles不存在， 该路由不需要权限
  // 3. 用户不是超级管理员， 并且该路由要求权限
  // userInfo.role
  // v.meta?.roles
  const userInfo = ll.getItem('userInfo') || {}
  if (userInfo.role === 'admin') return true;
  if (!v.meta?.roles) return true;
  return v.meta.roles.includes(userInfo.role)
}).map(v => {
  // 数据转化
  // 路由转化为导航菜单
  return {
    key: v.path,
    label: v.meta?.label,
    children: v.children && renderMenu(v.children)
  }
})



const Sider: React.FC = () => {
  const items: MenuItem[] = renderMenu(static_routes)
  // 获取访问路径
  const { pathname } = useLocation()
  const navigate = useNavigate()
  // /list/qwer/asdf
  // 当前 展开项目 菜单集合
 const defaultOpenKeys = pathname.slice(1).split('/').reduce((p, n, currentIndex, array) => {
    // 当前节点的路径
    n = '/' + n
    // 当前节点的路径
    p.push(p.join('') + n)
    // 当前节点的子节点的路径
    return p
  }, [] as string[])
  console.log(defaultOpenKeys)
  return (
    <div>
      <Menu 
        items={items} 
        theme="dark" 
        selectedKeys={[pathname]} 
        defaultOpenKeys={defaultOpenKeys}
        onClick={({ key }) => navigate(key)} 
        mode="inline"
      ></Menu>
    </div>
  )
}

export default Sider


const sum = (x: number, y: number): number => {
  return x + y
}

